import React, { useState } from 'react';
import { Form, Button, Input, Modal, Row, Col, Tag, Select } from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const DetailsForm = (props) => {
  const [formVals, setFormVals] = useState({
    id: props.values.id,
    appjobname: props.values.appjobname,
    backUpType: props.values.backUpType,
    beforeDay: props.values.beforeDay,
    perSize: props.values.perSize,
    backUpTime: props.values.backUpTime,
    descr: props.values.descr,
    status: props.values.status,
    updatetime: props.values.updatetime,
  });
  const [form] = Form.useForm();
  // const {Option} = Select;
  const {
    onSubmit: handleUpdate,
    onCancel: handleDetailModalVisible,
    detailModalVisible,
    values,
    detailType,
  } = props;

  const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: '${label}是必填的!',
    types: {
      // eslint-disable-next-line no-template-curly-in-string
      url: '${label}不是有效的url地址!',
    },
  };

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({ ...formVals, ...fieldsValue });
    handleUpdate({ ...formVals, ...fieldsValue });
  };

  const { Option } = Select;
  const renderContent = () => {
    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={0}>
            <FormItem name="id" label="id">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="appjobname" label="监控名称" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="descr" label="接口描述" required rules={[{ required: true }]}>
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="backUpType" label="备份类型" required rules={[{ required: true }]}>
              <Select
                key="backUpTypeSelect"
                showSearch
                style={{ width: 200 }}
                placeholder="请选择备份类型"
                filterOption={false}
                defaultValue=""
              >
                <Option key="any" value="" />
                <Option value="0">产线索引</Option>
                <Option value="1">本地索引</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="beforeDay" label="时间" required rules={[{ required: true }]}>
              <Select
                key="backUpSelect"
                showSearch
                style={{ width: 200 }}
                placeholder="请选择每次备份时间"
                filterOption={false}
                defaultValue=""
              >
                <Option key="any" value="" />
                <Option value="1">1天前</Option>
                <Option value="2">2天前</Option>
                <Option value="3">3天前</Option>
                <Option value="4">4天前</Option>
                <Option value="5">5天前</Option>
                <Option value="6">6天前</Option>
                <Option value="7">7天前</Option>
                <Option value="8">8天前</Option>
                <Option value="9">9天前</Option>
                <Option value="10">10天前</Option>
                <Option value="11">11天前</Option>
                <Option value="12">12天前</Option>
                <Option value="13">13天前</Option>
                <Option value="14">14天前</Option>
                <Option value="15">15天前</Option>
                <Option value="16">16天前</Option>
                <Option value="17">17天前</Option>
                <Option value="18">18天前</Option>
                <Option value="19">19天前</Option>
                <Option value="20">20天前</Option>
                <Option value="21">21天前</Option>
                <Option value="22">22天前</Option>
                <Option value="23">23天前</Option>
                <Option value="24">24天前</Option>
                <Option value="25">25天前</Option>
                <Option value="26">26天前</Option>
                <Option value="27">27天前</Option>
                <Option value="28">28天前</Option>
                <Option value="29">29天前</Option>
                <Option value="30">30天前</Option>
                <Option value="45">45天前</Option>
                <Option value="60">60天前</Option>
                <Option value="75">75天前</Option>
                <Option value="90">90天前</Option>
              </Select>
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="backUpTime" label="执行时间" required rules={[{ required: true }]}>
              <Select
                key="backUpSelect"
                showSearch
                style={{ width: 200 }}
                placeholder="请选择每次备份时间"
                filterOption={false}
                defaultValue=""
              >
                <Option key="any" value="" />
                <Option value="0">0点</Option>
                <Option value="1">1点</Option>
                <Option value="2">2点</Option>
                <Option value="3">3点</Option>
                <Option value="4">4点</Option>
                <Option value="5">5点</Option>
                <Option value="6">6点</Option>
                <Option value="7">7点</Option>
                <Option value="8">8点</Option>
                <Option value="9">9点</Option>
                <Option value="10">10点</Option>
                <Option value="11">11点</Option>
                <Option value="12">12点</Option>
                <Option value="13">13点</Option>
                <Option value="14">14点</Option>
                <Option value="15">15点</Option>
                <Option value="16">16点</Option>
                <Option value="17">17点</Option>
                <Option value="18">18点</Option>
                <Option value="19">19点</Option>
                <Option value="20">20点</Option>
                <Option value="21">21点</Option>
                <Option value="22">22点</Option>
                <Option value="23">23点</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="perSize" label="每次备份个数" required rules={[{ required: true }]}>
              <Select
                key="backUpSelect"
                showSearch
                style={{ width: 200 }}
                placeholder="请选择每次备份个数"
                filterOption={false}
                defaultValue=""
              >
                <Option key="any" value="" />
                <Option key="One" value="1">
                  1
                </Option>
                <Option key="two" value="2">
                  2
                </Option>
                <Option key="three" value="3">
                  3
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col className="gutter-row" span={detailType === 'query' ? 12 : 0}>
            <FormItem name="status" label="job状态">
              {formVals.status === '0' ? (
                <Tag color="#ff4d4f">执行中</Tag>
              ) : (
                <Tag color="#FFB800">暂停中</Tag>
              )}
            </FormItem>
          </Col>
          <Col className="gutter-row" span={detailType === 'query' ? 12 : 0}>
            <FormItem name="updatetime" label="更新时间">
              <Input />
            </FormItem>
          </Col>
        </Row>
      </>
    );
  };

  const renderFooter = () => {
    return (
      <>
        <Button
          onClick={() => handleDetailModalVisible(false, values)}
          style={{ display: detailType === 'query' ? '' : 'none' }}
        >
          确认
        </Button>
        <Button
          type="primary"
          onClick={() => handleNext()}
          style={{ display: detailType === 'edit' ? '' : 'none' }}
        >
          更新
        </Button>
        <Button
          type="primary"
          onClick={() => handleNext()}
          style={{ display: detailType === 'add' ? '' : 'none' }}
        >
          提交
        </Button>
        <Button
          onClick={() => handleDetailModalVisible(false, values)}
          style={{ display: detailType !== 'query' ? '' : 'none' }}
        >
          取消
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={880}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title={detailType === 'edit' ? '更新任务' : '新增任务'}
      visible={detailModalVisible}
      footer={renderFooter()}
      onCancel={() => handleDetailModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          id: formVals.id,
          appjobname: formVals.appjobname,
          backUpType: formVals.backUpType,
          beforeDay: formVals.beforeDay,
          perSize: formVals.perSize,
          backUpTime: formVals.backUpTime,
          descr: formVals.descr,
          status: formVals.status,
          updatetime: formVals.updatetime,
        }}
        validateMessages={validateMessages}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default DetailsForm;
